<template>
  <view class="container">
    <!-- 顶部搜索栏 -->
    <view class="search-bar">
      <input type="text" placeholder="搜索疾病、医生、药品等"/>
      <button type="primary" @click="onSearch">搜索</button>
    </view>

    <!-- 功能按钮 -->
    <view class="function-buttons">
      <view class="button department-box" @click="navigateToFindDoctor">
        <image src="/static/scss/58d3bfd29445f41f5b398aba72fa9fdd.png" mode="widthFix" style="width: 50px; height: 50px;" />
        <text>找医生</text>
      </view>
      <view class="button department-box" @click="navigateToMedicineDelivery">
        <image src="/static/scss/3237e5fe45bec78823ffea9edf32975c.png" mode="widthFix" style="width: 50px; height: 50px;" />
        <text>送药上门</text>
      </view>
      <view class="button department-box" @click="navigateToOnlineConsultation">
        <image src="/static/scss/155f6d5efc099ace51077f08dd00a6e4.png" mode="widthFix" style="width: 50px; height: 50px;" />
        <text>在线咨询</text>
      </view>
      <view class="button" @click="clickMoxin">
        <image src="/static/ylmx.png" mode="widthFix" style="width: 50px; height: 50px;" />
        <text>医疗模型</text>
      </view>
      <view class="button department-box" @click="navigateToHospital">
        <image src="/static/gh.png" mode="widthFix" style="width: 50px; height: 50px;" />
        <text>去挂号</text>
      </view>
    </view>

    <!-- 底部服务图标 -->
    <view class="scroll-container">
      <view class="bottom-servicese">
        <view v-for="(service, index) in services" :key="index" class="service-icons" @click="handleNavigation(service.action)">
          <img :src="service.image" :alt="service.alt" class="service-img"/>
          <text>{{ service.text }}</text>
        </view>
      </view>
    </view>


    <!-- 热门科室 -->
    <view class="section popular-departments">
      <view class="section-title">热门科室</view>
      <view class="department-box-container">
        <view class="department-box" v-for="(department, index) in popularDepartments" :key="index">
          <view class="department-name">{{ department.departmentsName }}</view>
          <image src="/static/scss/23c06bdcf327b6572e0e7286f89992f4.png" mode="widthFix" />
          <view class="department-info">
            <view class="department-specialty">{{ department.remark }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 轮播图（添加了v-lazy指令进行懒加载） -->
    <swiper class="swiper-container" autoplay="true" interval="5000" indicator-dots="true">
      <block v-for="(banner, index) in banners" :key="index">
        <swiper-item>
          <image class="swiper-image" :src="banner.imageUrl"></image>
        </swiper-item>
      </block>
    </swiper>

    <!-- 推荐医生 -->

    <view class="section recommended-doctors">
      <view class="section-title">推荐医生</view>
      <view class="containers">

        <view class="doctor-list-wrapper">
          <view class="doctor-info" v-for="(doctor, index) in doctors" :key="index">
            <image class="doctor-avatar" :src="doctor.profilePic" mode="aspectFill" @click="xq(doctor)"></image>
            <view class="doctor-details">
              <text class="doctor-name" >{{ doctor.name }}</text>
              <view class="doctor-meta">
                <text class="doctor-title" style="color: red">{{ doctor.hospitalName }}</text>
                <text class="doctor-specialty">{{ doctor.departmentsName}}</text>
              </view>
              <view class="doctor-hospital-info">
                <text class="doctor-hospital">{{ doctor.hospital }}</text>
                <text class="hospital-level" v-if="doctor.hospitalLevel ===0">三甲医院</text>
                <text class="hospital-level" v-if="doctor.hospitalLevel ===1">二甲医院</text>
                <text class="hospital-level" v-if="doctor.hospitalLevel ===2">一甲医院</text>
              </view>
            </view>
          </view>
        </view>

        <view class="view-more">
          <button @click="viewMore">查看更多</button>
        </view>
      </view>

    </view>

    <view class="container">
      <view class="tab-bar">
        <view
            v-for="(tab, index) in tabOptions"
            :key="index"
            class="tab-button"
            :class="{ 'selected-tab-button': selectedTab === tab.newsTypeId }"
            @click="setSelectedTab(tab.newsTypeId)"
        >
          <text class="tab-button-text">{{ getTabTitle(tab.newsTypeId) }}</text>
        </view>
      </view>
      <scroll-view class="content-container" :scroll-y="true">
        <view v-for="news in filteredNews" :key="news.id">
          <image :src="news.imageUrl" class="news-image" @click="clickLinkUr(news.linkUrl)"/>
          <text class="news-title" @click="clickLinkUr(news.linkUrl)">{{ news.title }}</text>
          <text class="news-date">{{ news.date }}</text>
        </view>
      </scroll-view>
    </view>

    <!-- 其他内容（如疾病自查、在线问诊等）可以根据需求继续添加 -->
  </view>
</template>

<script>
import {getDoctor} from "@/api/doctor/doctor";

import {fetchContent} from "@/api/home/shop";

import { sortLookCount } from '@/api/departments/departments.js';
export default {
  data() {
    return {
      doctors: [],
      queryParams: {
        pageNum: 1,
        pageSize: 4,
        name: null,
        sex: null,
        birthDate: null,
        phone: null,
        address: null,
        licenseNumber: null,
        licenseissueDate: null,
        licenseExpireDate: null,
        hospitalId: null,
        departmentId: null,
        bio: null,
        profilePic: null,
        status: null
      },

      // 更多轮播图数据...
      banners: [],
      services: [
        { action: 'navigateToConsultation', image: '/static/s7.png', alt: '图文咨询', text: '图文咨询' },
        { action: 'navigateToPhoneConsultation', image: '/static/s9.png', alt: '电话咨询', text: '电话咨询' },
        { action: 'navigateAisultation', image: '/static/s2.png', alt: '智能咨询', text: '智能咨询' },
        { action: 'navigateToPhoneConsultation', image: '/static/s13.png', alt: '自诊自查', text: '自诊自查' },
        { action: 'navigateToHospital', image: '/static/s8.png', alt: '找医院', text: '找医院' },
        { action: 'navigateToPhoneConsultation', image: '/static/s10.png', alt: '检测早筛', text: '检测早筛' },
        { action: 'navigateToPhone', image: '/static/s12.png', alt: '健康测评', text: '健康测评' },
        { action: 'navigateToPhoneConsultation', image: '/static/s4.png', alt: '视频问诊', text: '视频问诊' },
        { action: 'navigateToPhoneConsultation', image: '/static/s6.png', alt: '儿科门诊', text: '儿科门诊' },
        { action: 'navigateToPhoneConsultation', image: '/static/s1.png', alt: '问诊开药', text: '问诊开药' },
        { action: 'navigateToPhoneConsultation', image: '/static/s13.png', alt: '权威专家', text: '权威专家' },
        { action: 'navigateToPhoneConsultation', image: '/static/s11.png', alt: '权威专家', text: '权威专家' },
        { action: 'navigateToPhoneConsultation', image: '/static/s3.png', alt: '就医陪诊', text: '就医陪诊' },
        { action: 'navigateToPhoneConsultation', image: '/static/s5.png', alt: '疫苗预约', text: '疫苗预约' },
      ],
      recommendedDoctors: [
        { name: '张三', specialty: '内科', avatar: '/static/avatar1.png' },
        { name: '李四', specialty: '外科', avatar: '/static/avatar2.png' },
        // 更多医生数据...
      ],
      popularDepartments: [
        { name: '内科', icon: '/static/department-icon1.png' },
        { name: '外科', icon: '/static/department-icon2.png' },
        // 更多科室数据...
      ],
      healthNews: [
        { title: '健康资讯标题1', summary: '这是一条健康资讯的摘要内容1', image: '/static/news-image1.png' },
        { title: '健康资讯标题2', summary: '这是一条健康资讯的摘要内容2', image: '/static/news-image2.png' },
        // 更多健康资讯数据...
      ],
      selectedTab: 0, // 默认选中“热点”
      newsList:[],
      tabOptions: [],
    };
  },
  computed: {
    filteredNews() {
      return this.newsList.filter(news => news.newsTypeId === this.selectedTab);
    },
  },
  async onLoad() {
    this.getDoctorList();
    this.loadData();
    this.sortLookCount();
  },

  methods: {
    navigateToHospital(){
      uni.navigateTo({
        url: '/pages/hospital/index'
      });
    },
    sortLookCount() {
      // 使用导入的 sortLookCount 函数（这里假设它是一个正确配置的异步请求函数，用于获取热门科室数据）
      sortLookCount().then(res => {
        if (res && res.code === 200 && res.data) {
          this.popularDepartments = res.data;
        } else {
          console.error('获取热门科室数据出现异常，可能返回格式不正确:', res);
        }
      }).catch(err => {
        console.error('获取热门科室数据失败，网络或其他错误:', err);
      });
    },
    clickLinkUr(url){
      window.location.href =url;
    },
    clickMoxin(){
      uni.navigateTo({
        url: '/pages/model/model'
      });
    },
    async loadData() {
      const response = await fetchContent()
      // fetchContent().then(response => {
      // console.log("onLoad", response.data);
      // this.advertiseList = response.data.advertiseList;
      // this.swiperLength = this.advertiseList.length;
      // this.titleNViewBackground = this.titleNViewBackgroundList[0];
      this.banners = response.data.banners;
      const uniqueNewsTypes = [...new Set(response.data.newsList.map(item => item.newsTypeId))];
      this.tabOptions = uniqueNewsTypes.map(item => ({
        newsTypeId: item,
        title: this.getTabTitle(item), // 可以根据 newsTypeId 获取标题
      }));
      this.newsList = response.data.newsList;
      // this.newProductList = response.data.newProductList;
      // this.hotProductList = response.data.hotProductList;
      // });
    },
    setSelectedTab(newsTypeId) {
      this.selectedTab = newsTypeId;
    },
    getTabTitle(newsTypeId) {
      switch (newsTypeId) {
        case 0: return '热点';
        case 1: return '专家科普';
        case 2: return '生活';
        case 3: return '母婴';
        case 4: return '辟谣';
        default: return '';
      }
    },
    //跳转医生详情页面
    xq(item) {
      let id = item.id;
      uni.navigateTo({
        url: `/pages/doctor/doctor?id=${id}`
      })
    },

    viewMore(item){
      // let id = item.id;
      uni.navigateTo({
        url: `/pages/departments/departments`
      })
    },





    getDoctorList() {
      this.loading = true;
      getDoctor(this.queryParams).then(response => {
        this.doctors = response.data.rows;
        this.total = response.data.total;
        this.loading = false;
      });
    },

    onSearch() {
      // 处理搜索功能
      uni.navigateTo({
        url: '/pages/search/search'
      });
    },
    navigateToFindDoctor() {
      // 跳转到找医生页面
      uni.navigateTo({
        url: '/pages/departments/departments'
      });
    },
    navigateToMedicineDelivery() {
      // 跳转到送药上门页面
      uni.navigateTo({
        url: '/pages/medicineDelivery/medicineDelivery'
      });
    },
    navigateToOnlineConsultation() {
      // 跳转到在线咨询页面
      uni.navigateTo({
        url: '/pages/onlineConsultation/onlineConsultation'
      });
    },
    handleNavigation(action) {
      // 根据action执行相应的导航逻辑
      if (action === 'navigateToConsultation') {
        // 导航到图文咨询页面
      } else if (action === 'navigateToPhoneConsultation') {
        // 导航到电话咨询页面等
      }else if (action === 'navigateAisultation') {
        uni.navigateTo({
          url: '/pages/ai/ai'
        });
      }else if(action=='navigateToPhoneCp'){
        uni.navigateTo({
          url: '/pages/ai/evaluation'
        });
      }else if (action === 'navigateToHospital') {
        uni.navigateTo({
          url: '/pages/hospital/index'
        });
      }else if (action === 'navigateToPhone') {
        uni.navigateTo({
          url: '/pages/ai/evaluation'
        });
      }
    },
  }
}
</script>

<style scoped>.containers {  padding: 20px;}.doctor-list-wrapper {  display: flex;  flex-wrap: wrap;  padding: 1px;  background-color: #f5f5f5; /* 背景色可根据需要调整 */}.doctor-info {  display: flex;  flex-direction: column;  align-items: flex-start;  background-color: #fff;  margin: 10px;  padding: 15px;  border-radius: 8px;  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  width: calc(33.333% - 40px); /* 三列布局，可根据需要调整 */  box-sizing: border-box;}.doctor-avatar {  width: 80px;  height: 80px;  border-radius: 50%;  margin-bottom: 15px;}.doctor-details {  flex: 1;}.doctor-name {  font-size: 18px;  font-weight: bold;  margin-bottom: 10px;}.doctor-meta {  display: flex;  justify-content: space-between;  margin-bottom: 10px;}.doctor-title, .doctor-specialty {  font-size: 14px;  color: #888;}.doctor-hospital-info {  display: flex;  justify-content: space-between;  align-items: center;  margin-bottom: 5px;}.doctor-hospital {  font-size: 14px;  color: #333;}.hospital-level {  background-color: #e0f7fa;  padding: 5px 10px;  border-radius: 4px;  font-size: 12px;  color: #01796b;}/* 响应式设计 */@media (max-width: 768px) {  .doctor-info {    width: calc(50% - 40px); /* 双列布局 */  }}@media (max-width: 480px) {  .doctor-info {    width: 100%; /* 单列布局 */  }}/* ...（其他样式保持不变） */button {  padding: 10px 20px;  background-color: #007aff;  color: #fff;  border: none;  border-radius: 5px;}.container {  padding: 10px;}.navbar {  display: flex;  align-items: center;  justify-content: space-between;  padding: 10px;  background-color: #ffffff;  border-bottom: 1px solid #e5e5e5;}.navbar-logo {  width: 60px;  height: 60px;}.navbar-search {  display: flex;  align-items: center;  flex: 1;}.search-input {  flex: 1;  padding: 5px;  border: 1px solid #e5e5e5;  border-radius: 20px;  margin-right: 10px;}.search-icon {  width: 20px;  height: 20px;}.swiper-container {  width: 100%;  height: 200px;}.swiper-image {  width: 100%;  height: 100%;}.section {  margin-top: 20px;}.section-title {  font-size: 20px;  font-weight: bold;  margin-bottom: 10px;}.doctor-list, .news-list {  padding: 10px;  background-color: #f9f9f9;}.doctor-item, .news-item {  display: flex;  align-items: center;  padding: 15px 0;  border-bottom: 1px solid #e5e5e5;}.doctor-avatar, .news-image {  width: 80px;  height: 80px;  border-radius: 50%;  margin-right: 15px;}.doctor-info, .news-content {  flex: 1;}.doctor-name, .news-title {  font-size: 18px;  font-weight: bold;}.doctor-specialty, .news-summary {  font-size: 14px;  color: #999999;}.department-grid {  display: flex;  flex-wrap: wrap;}.department-item {  width: 48%;  margin: 1%;  padding: 15px;  background-color: #ffffff;  border-radius: 10px;  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);  display: flex;  align-items: center;  flex-direction: column;}.department-icon {  width: 40px;  height: 40px;  margin-bottom: 10px;}.department-name {  font-size: 16px;  font-weight: bold;  text-align: center;}.container {  padding: 16px;  background-color: #f8f8f8;}.search-bar {  display: flex;  align-items: center;  margin-bottom: 16px;}.search-bar input {  flex: 1;  padding: 8px;  border: 1px solid #ddd;  border-radius: 4px;  margin-right: 8px;}.search-bar button {  padding: 8px 16px;  background-color: #4caf50;  color: white;  border: none;  border-radius: 4px;}.function-buttons {  display: flex;  flex-wrap: wrap;  margin-bottom: 16px;}.function-buttons .button {  display: flex;  align-items: center;  margin-right: 16px;  margin-bottom: 16px;  padding: 8px;  background-color: white;  border: 1px solid #ddd;  border-radius: 4px;}.function-buttons .button image {  width: 24px;  height: 24px;  margin-right: 8px;}.doctor-info {  display: flex;  flex-direction: column;  align-items: center;  margin-bottom: 16px;}.doctor-info .doctor-photo {  width: 100px;  height: 100px;  border-radius: 50%;}.doctor-info .doctor-name {  margin-top: 8px;  font-size: 18px;  font-weight: bold;}.bottom-servicese {  display: flex;  flex-wrap: nowrap; /* 防止换行 */}.service-icons {  flex: 0 0 calc(14.2857% - 10px); /* 每行7个图标，减去适当的间距，这里假设左右各5px间距 */  margin: 5px; /* 图标之间的间距 */  box-sizing: border-box; /* 包括padding和border在内计算元素的总宽度和高度 */  text-align: center; /* 文字居中 */  vertical-align: middle; /* 垂直居中 */}.scroll-container {  width: 100%;  overflow-x: auto; /* 允许水平滚动 */  white-space: nowrap; /* 防止子元素换行 */  background-color: white; /* 设置背景为白色 */}.service-img {  width: 100%; /* 图片宽度占满容器 */  height: auto; /* 图片高度自动调整以保持比例 */}text {  display: block; /* 文字块级显示 */  margin-top: 5px; /* 图片和文字之间的间距 */}.other-info {  margin-top: 16px;  font-size: 14px;  color: #888;}.container {  flex: 1;  background-color: #f5f5f5;  padding: 16px;}.tab-bar {  display: flex;  flex-direction: row;  justify-content: space-around;  margin-bottom: 16px;  background-color: #fff;  border-bottom: 1px solid #ddd;}.tab-button {  padding: 8px 24px;  align-items: center;}.selected-tab-button {  border-bottom: 2px solid #007aff;}.tab-button-text {  font-size: 16px;}.content-container {  flex: 1;  background-color: #fff;  overflow-y: auto; /* 确保内容区域可以滚动 */}</style>

<style scoped>
.containers {
  padding: 20px;
}




.doctor-list-wrapper {
  display: flex;
  flex-wrap: wrap;
  padding: 1px;
  background-color: #f5f5f5; /* 背景色可根据需要调整 */
}

.doctor-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: #fff;
  margin: 10px;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: calc(33.333% - 40px); /* 三列布局，可根据需要调整 */
  box-sizing: border-box;
}

.doctor-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 15px;
}

.doctor-details {
  flex: 1;
}

.doctor-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.doctor-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.doctor-title, .doctor-specialty {
  font-size: 14px;
  color: #888;
}

.doctor-hospital-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.doctor-hospital {
  font-size: 14px;
  color: #333;
}

.hospital-level {
  background-color: #e0f7fa;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  color: #01796b;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .doctor-info {
    width: calc(50% - 40px); /* 双列布局 */
  }
}

@media (max-width: 480px) {
  .doctor-info {
    width: 100%; /* 单列布局 */
  }
}
/* ...（其他样式保持不变） */


button {
  padding: 10px 20px;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 5px;
}



.container {
  padding: 10px;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background-color: #ffffff;
  border-bottom: 1px solid #e5e5e5;
}

.navbar-logo {
  width: 60px;
  height: 60px;
}

.navbar-search {
  display: flex;
  align-items: center;
  flex: 1;
}

.search-input {
  flex: 1;
  padding: 5px;
  border: 1px solid #e5e5e5;
  border-radius: 20px;
  margin-right: 10px;
}

.search-icon {
  width: 20px;
  height: 20px;
}

.swiper-container {
  width: 100%;
  height: 200px;
}

.swiper-image {
  width: 100%;
  height: 100%;
}

.section {
  margin-top: 20px;
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.doctor-list, .news-list {
  padding: 10px;
  background-color: #f9f9f9;
}

.doctor-item, .news-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #e5e5e5;
}

.doctor-avatar, .news-image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 15px;
}

.doctor-info, .news-content {
  flex: 1;
}

.doctor-name, .news-title {
  font-size: 18px;
  font-weight: bold;
}

.doctor-specialty, .news-summary {
  font-size: 14px;
  color: #999999;
}

.department-grid {
  display: flex;
  flex-wrap: wrap;
}

.department-item {
  width: 48%;
  margin: 1%;
  padding: 15px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  flex-direction: column;
}

.department-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
}

.department-name {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}
.container {
  padding: 16px;
  background-color: #f8f8f8;
}

.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.search-bar input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-right: 8px;
}

.search-bar button {
  padding: 8px 16px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
}

.function-buttons {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.function-buttons .button {
  display: flex;
  align-items: center;
  margin-right: 16px;
  margin-bottom: 16px;
  padding: 8px;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.function-buttons .button image {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

.doctor-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 16px;
}

.doctor-info .doctor-photo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.doctor-info .doctor-name {
  margin-top: 8px;
  font-size: 18px;
  font-weight: bold;
}
.bottom-servicese {
  display: flex;
  flex-wrap: nowrap; /* 防止换行 */
}
.service-icons {
  flex: 0 0 calc(14.2857% - 10px); /* 每行7个图标，减去适当的间距，这里假设左右各5px间距 */
  margin: 5px; /* 图标之间的间距 */
  box-sizing: border-box; /* 包括padding和border在内计算元素的总宽度和高度 */
  text-align: center; /* 文字居中 */
  vertical-align: middle; /* 垂直居中 */
}
.scroll-container {
  width: 100%;
  overflow-x: auto; /* 允许水平滚动 */
  white-space: nowrap; /* 防止子元素换行 */
  background-color: white; /* 设置背景为白色 */
}

.service-img {
  width: 100%; /* 图片宽度占满容器 */
  height: auto; /* 图片高度自动调整以保持比例 */
}

text {
  display: block; /* 文字块级显示 */
  margin-top: 5px; /* 图片和文字之间的间距 */
}

.other-info {
  margin-top: 16px;
  font-size: 14px;
  color: #888;
}
.container {
  flex: 1;
  background-color: #f5f5f5;
  padding: 16px;
}
.tab-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-bottom: 16px;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}
.tab-button {
  padding: 8px 24px;
  align-items: center;
}
.selected-tab-button {
  border-bottom: 2px solid #007aff;
}
.tab-button-text {
  font-size: 16px;
}
.content-container {
  flex: 1;
  background-color: #fff;
  overflow-y: auto; /* 确保内容区域可以滚动 */
}

.function-buttons .button:active {
  transform: scale(0.98); /* 点击时缩小 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 点击时更深的阴影 */
}

.function-buttons .button image {
  width: 40px; /* 图标宽度 */
  height: 40px; /* 图标高度 */
  margin-bottom: 10px; /* 图标与文本之间的间距 */
}

.function-buttons .button text {
  font-size: 16px; /* 文本字体大小 */
  margin-bottom: 5px; /* 主文本与副文本之间的间距 */
}

.function-buttons .button subtext {
  font-size: 12px; /* 副文本字体大小 */
  color: #fff; /* 副文本颜色为白色 */
}

.function-buttons .button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100px; /* 统一按钮宽度 */
  height: 100px; /* 统一按钮高度 */
  margin: 0 5px; /* 外边距，确保按钮之间有间隔 */
  background: linear-gradient(135deg, #ff9a9e, #fad0c4); /* 渐变背景 */
  border-radius: 12px; /* 圆角 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影 */
  transition: transform 0.2s, box-shadow 0.2s; /* 过渡效果 */
  color: #fff; /* 文本颜色为白色，以确保在暗色背景上清晰可见 */
}

.function-buttons .button image {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
.function-buttons {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.function-buttons .button {
  display: flex;
  align-items: center;
  margin-right: 16px;
  margin-bottom: 16px;
  padding: 8px;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
}
/* 调整按钮和图标的大小 */
.function-buttons .button {
  padding: 12px; /* 增加按钮内边距 */
}

.function-buttons .button image {
  width: 32px;
  height: 32px;
  margin-right: 12px; /* 增加图标大小和右边距 */
}

/* 热门科室外层容器样式 */
.popular-departments {
  margin-top: 20px;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 科室网格布局样式调整 */
.department-box-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 15px; /* 增加科室项之间的间距 */
}

/* 单个科室项样式 */
.department-box {
  width: 48%; /* 控制科室项宽度 */
  background-color: #ffffff; /* 白色背景 */
  border-radius: 12px; /* 圆角 */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* 阴影 */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px; /* 增加内边距 */
  transition: transform 0.2s, box-shadow 0.2s; /* 过渡效果 */
}

.department-box:hover {
  transform: translateY(-5px); /* 鼠标悬停时上移 */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* 悬停时加深阴影 */
}

/* 科室名称样式 */
.department-name {
  font-size: 20px; /* 增加字体大小 */
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
  color: #333; /* 调整字体颜色 */
}

/* 科室图片样式 */
.department-image {
  width: 100%; /* 图片宽度自适应 */
  height: 300px; /* 限制图片高度 */
  border-radius: 8px; /* 圆角 */
  margin-bottom: 10px;
}

/* 科室描述样式 */
.department-info {
  text-align: center;
}

</style>
